import React, { Component } from 'react'
import { Form, Input, Button, Upload, message } from 'antd';
/* 图片上传图标 */
import { UploadOutlined } from '@ant-design/icons';
/* 增加文章接口 */
import { addArt } from '@/api'
// 引入富文本编辑器
import E from 'wangeditor'
export default class ArtAdd extends Component {
  constructor(){
    super();
    // 新建一个state
    this.state = {
      thumb: '',
      editor: null
    }
  }
  render() {
    // console.log(this.props);
    const layout = {
      labelCol: {
        /* 控制缩进 */
        span: 4,
      },
      wrapperCol: {
        span: 20,
      },
    };
    const tailLayout = {
      wrapperCol: {
        offset: 4,
        span: 16,
      },
    }
    const props = {
      name: 'file',
      /* 文件提交接口 */
      action: '/api/upload',
      headers: {
        authorization: 'authorization-text',
      },
      onChange: (info) =>{
        if (info.file.status !== 'uploading') {
          // console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
          // console.log(info.file.response.data.url);
          this.setState({
            thumb: info.file.response.data.url
          })
        } else if (info.file.status === 'error') {
          message.error(`${info.file.name} file upload failed.`);
        }
      },
    };
  
    return (
      <div style={{maxWidth: 800}}>
        <Form
          {...layout}
          name="basic"
          onFinish={this.submitForm}
          
        >
          <Form.Item
            label="作者"
            name="author"
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="标题"
            name="title"
            rules={[
              {
                required: true,
                message: '必须输入标题!',
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="描述"
            name="desc"
          >
            <Input.TextArea  />
          </Form.Item>
          <Form.Item
            label="上传封面"
          >
            {/* 上传组件 */}
             <Upload {...props}>
              <Button icon={<UploadOutlined />}>Click to Upload</Button>
            </Upload>,
          </Form.Item>
          <Form.Item
            label="详情"
          >
            <div id="content"/>
          </Form.Item>
          <Form.Item {...tailLayout}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </div>
    )
  };
  componentDidMount(){
    /* 渲染富文本 */
    this.initEditor();
  };
  initEditor = () =>{
    // 初始化富文本
    const editor = new E('#content')
    editor.create();
    // editor存放到state
    this.setState({
      editor
    })
  };
  submitForm = (params) =>{
    // 提交
    params = {
      ...params,
      /* 图片地址 */
      thumb: this.state.thumb,
      /* 渲染的内容 */
      content: this.state.editor.txt.html()
    }
    /* 新增文章 */
    addArt(params).then(res=> {
      // 成功弹出提示框
      if(res.data.code === 200) {
        message.success(res.data.msg, 2, () => {
          /* 跳转到当前页 */
          this.props.history.go(0)
        })
      }
    })
  }
}
